/* eslint-disable @typescript-eslint/no-unused-vars */
import BackBtn from '@components/globalComponents/BackBtn';
import { useEffect } from 'react';
import * as THREE from 'three';
import './index.css';

export default function Page() {
  let camera: any;
  let renderer: any;
  let scene: any;

  const onResize = () => {
    window.addEventListener(
      'resize',
      () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        console.log('camera.aspect:', camera.aspect);
        camera.updateProjectionMatrix();
        renderer.render(scene, camera);
      },
      false,
    );
  };
  const initThree = (): any => {
    // 场景
    // 详细解释scene
    // scene是一个容器，用于存储所有的3D对象（如几何体、材质、光源等）。
    // 场景是3D渲染的基础，所有的3D元素都必须添加到场景中才能被渲染。
    scene = new THREE.Scene();
    // 相机参数：
    const cameraParams = {
      fov: 60, // 从0-100的效果：0°时相当于闭眼，100°时相当于睁眼。
      aspect: window.innerWidth / window.innerHeight,
      near: 0.001,
      far: 1000,
    };
    /**
     * 详细解释THREE.PerspectiveCamera
     * fov:眼球张开的角度，0°时相当于闭眼。 --- 对应英文单词：field of view
     * aspect:可视区域横纵比。 --- 对应英文单词：aspect ratio
     * near:眼睛能看到的最近垂直距离。 --- 对应英文单词：near
     * far：眼睛能看到的最远垂直距离 --- 对应英文单词：far
     */
    camera = new THREE.PerspectiveCamera(
      cameraParams.fov,
      cameraParams.aspect,
      cameraParams.near,
      cameraParams.far,
    );
    // 相机位置：
    // 相机位置是指相机在3D空间中的坐标。
    // 相机位置决定了相机的视角，即相机看到的场景。
    // 相机位置通常设置在场景中的某个点，以便相机能够看到场景中的物体。
    camera.position.z = 8; // 数字越小越靠近，看去更大。反之，看去越小
    camera.position.x = 0; // 作用移动
    camera.position.y = 0; // 上下移动

    // 渲染器
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(1000, 800);
    const dom: any = document.getElementById('three-demo1-scene');
    dom.appendChild(renderer.domElement);

    // 几何体
    const geometry = new THREE.BoxGeometry(2, 2, 2);

    // 材质
    const material = new THREE.MeshBasicMaterial({
      color: 0xffff00,
    });

    // 物体
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }

    animate();
  };

  useEffect(() => {
    initThree();
    onResize();
  }, []);
  return (
    <div className="three-demo1-container">
      <div>
        <BackBtn />
      </div>
      <div id="three-demo1-scene" />
    </div>
  );
}
